<template>
  <el-dialog :title="formBak.id?'编辑':'新增'" :visible.sync="dialogFormVisible" @close="cleanUpForm">
    <el-form ref="departmentForm" :model="form" :rules="check">
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="部门名称" />
      </el-form-item>
      <el-form-item label="部门负责人" :label-width="formLabelWidth" prop="manager">
        <el-select v-model="form.manager" placeholder="负责人" @blur="checkManager">
          <el-option label="老王" value="老王" />
          <el-option label="老张" value="老张" />
          <el-option label="老李" value="老李" />
          <el-option label="老葛" value="老葛" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" :label-width="formLabelWidth" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" placeholder="1~200字部门介绍" :rows="5" />
      </el-form-item>
      <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
        <el-input v-model="form.code" autocomplete="off" placeholder="部门编码" />
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cleanUpForm">取 消</el-button>
      <el-button type="primary" @click="addDepartment">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { inquireDepartment, addDepartmentApi, getDepartmentApi, reviseDepartmentApi } from '@/api/departments'
export default {
  data() {
    // 自定义校验
    const checkRepeatName = async(rule, val, callback) => {
      const { depts } = await inquireDepartment()
      const isRepeat = depts.filter(item => item.pid === this.form.pid).some(item => item.name === val && this.formBak.name !== val)
      isRepeat ? callback(new Error('有相同名字的部门')) : callback()
    }
    const checkRepeatCode = async(rule, val, callback) => {
      const { depts } = await inquireDepartment()
      const isRepeat = depts.some(item => item.code === val && this.formBak.code !== val)
      isRepeat ? callback(new Error('有相同编码的部门')) : callback()
    }
    return {
      dialogFormVisible: false, // 显示与隐藏
      formLabelWidth: '120px', // 大小
      // 表单值
      form: {
        name: '',
        manager: '',
        introduce: '',
        code: '',
        pid: '' // 父级id
      },
      ppid: '', // 父级的pid
      // 传过来的表单值
      formBak: {},
      // 校验规则
      check: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { max: 8, message: '长度不能超过八个字符', trigger: 'blur' },
          { validator: checkRepeatName, trigger: 'blur' } // 自定义校验
        ],
        manager: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 5 到 16 个字符', trigger: 'blur' },
          { validator: checkRepeatCode, trigger: 'blur' } // 自定义校验
        ]
      }
    }
  },
  methods: {
    // 确认请求
    async addDepartment() {
      await this.$refs.departmentForm.validate()
      if (this.formBak.id) {
        await reviseDepartmentApi(this.form)
        this.$message.success('编辑成功')
      } else {
        // 添加部门
        // 校验
        await addDepartmentApi(this.form)
        this.$message.success('添加成功')
      }
      this.cleanUpForm()
      // 通知父组件重新渲染
      this.$emit('getDepartment')
    },
    // 延时校验
    checkManager() {
      setTimeout(() => {
        this.$refs.departmentForm.validateField('manager')
      }, 100)
    },
    // 清理表单
    cleanUpForm() {
      this.$refs.departmentForm.resetFields()
      this.dialogFormVisible = false
      this.formBak = {}
    },
    // 查询部门详情
    async getDepartment(id) {
      // 数据回显
      const res = await getDepartmentApi(id)
      this.form = { ...res }
      this.formBak = res
    }
  }

}
</script>

<style>

</style>
